<template>
    <div class="left-side widthPer25 whiteBackgroundf7f7f7 heightPer100 overflowHidden overflowYAuto marginLeft0">
        <ul>
            <li class='height2 lineHeight2 fontSize0_65 grayBoderBottome2e2e2 grayBoderRighte2e2e2 overflowHidden textIndent0_5 black MicrosoftYaHei' v-for="(item,index) in categorys" :key="index" tag="li" :class="categoryStyle(item.id,index)" @click="sel(index,item)">
                {{ item.site_cate_name }}
            </li>
        </ul>
    </div>
</template>
<script>
import '../../../style/normalize.css'
import './css/category.scss'
import '../../../style/base.css'
export default {
    props: {
        // 从父组件传递过来的数据
        categorys: {
            default: function() {
                return []
            }
        }       
    },   
    data() {
        return {
            active: ''
        }
    },
    methods: {
        categoryStyle: function(id, index) {
            if (index === 0 && this.active === '') {
                return 'active'
            } else if (id === this.active) {
                return 'active'
            }
        },
        sel: function(index, item) {
            this.$emit('select', this.active = item.id)
        }
    },
    mounted() {        
    }

}
</script>